<template>
  <div class="ant-upload-list ant-upload-list-picture" :class="file.status === 'error' ? 'ant-upload-list-item-error' : ''">
    <div class="ant-upload-list-item" :class="prefixCls + '-item'">
      <div class="ant-upload-list-item-thumbnai">
        <ImagePreview :class="prefixCls + '-image-preview'" :image-list="[{ src: file.url, width: '48px', placeholder: false }]" />
      </div>
      <span class="ant-upload-list-item-name">{{ file.name }}</span>

      <span class="ant-upload-list-item-actions picture">
        <a-button
          @click="handleRemove"
          size="small"
          type="text"
          title="移除文件"
          class="ant-upload-list-item-action ant-btn-icon-only"
          :class="prefixCls + '-action'"
        >
          <Icon icon="i-ant-design:delete-outlined" />
        </a-button>
      </span>
    </div>
  </div>
</template>
<script lang="ts" name="file-record" setup>
  import { ref, unref, onMounted, onUnmounted, watchEffect } from "vue"
  import { useMessage } from "/@/hooks/web/useMessage"
  import { ImagePreview } from "/@/components/Preview/index"
  import { propTypes } from "/@/utils/propTypes"
  import { useDesign } from "/@/hooks/web/useDesign"
  import { Icon } from "/@/components/Icon"

  const { createMessage } = useMessage()
  const emit = defineEmits(["remove", "download"])
  const { prefixCls } = useDesign("select-material")

  const props = defineProps({
    width: propTypes.string.def("300px"),
    file: propTypes.object.def({}),
  })

  onUnmounted(() => {
    console.log("onUnmounted-props", unref(props))
  })

  watchEffect(() => {})

  const handleDownload = () => {
    emit("download")
  }

  const handleRemove = () => {
    emit("remove")
  }
</script>

<style lang="less">
  @prefix-cls: ~"@{namespace}-select-material";
  .@{prefix-cls}-image-preview .ant-image {
    display: block !important;
    img {
      width: 48px;
      height: 48px;
      overflow: hidden;
      white-space: nowrap;
      /* text-overflow: ellipsis; */
      line-height: 66px;
      text-align: center;
      flex: none;
    }
  }

  .@{prefix-cls}-item {
    display: flex;
    align-items: center;
  }

  .@{prefix-cls}-action:hover {
    color: #ff4d4f;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
  }

  .@{prefix-cls}-image-preview .ant-image-mask-info {
    // 将div下的所有元素隐藏文字大小为0
    visibility: hidden !important;
    font-size: 0 !important;
  }
  .@{prefix-cls}-image-preview .ant-image-mask-info span {
    // 再单独给span标签添加样式 让其显示并且给出文字大小
    visibility: visible !important;
    font-size: 14px !important;
  }
</style>
